<template>
  <!-- 添加或修改订单提成记录对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body :close-on-click-modal="false" v-dialogDrag>

    <el-row :gutter="10">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单信息</span>
          </div>
          <el-descriptions v-if="Object.keys(order).length>0" class="margin-top " :contentStyle="CS" :label-style="LS"
            title="" :column="2" size="medium" border>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                项目名称
              </template>
              {{order.project.name}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-money"></i>
                所属地区
              </template>
              <dict-tag :options="dict.type.order_area" :value="order.area" />
            </el-descriptions-item>


            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                订单编号
              </template>
              {{order.code}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-money"></i>
                订单名称
              </template>
              {{order.name}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-c-scale-to-original"></i>
                开票日期-回款日期
              </template>
              {{order.invoicingTime}}~{{order.endDate}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-bank-card"></i>
                回款天数
              </template>
              {{order.returnDays}}天
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-c-scale-to-original"></i>
                订单金额
              </template>
              {{order.contractMoney}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-bank-card"></i>
                业务员
              </template>
              {{order.salesmanName}}
            </el-descriptions-item>

          </el-descriptions>
        </el-card>
      </el-col>

      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>提成规则</span>
          </div>
          <el-descriptions v-if="Object.keys(rule).length>0" class="margin-top " :contentStyle="CS" :label-style="LS" title="" :column="1" size="medium"
            border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                所属地区
              </template>
              <dict-tag :options="dict.type.order_area" :value="rule.area.split(',')" />
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-bank-card"></i>
                提成比例
              </template>
              {{rule.percent}}%
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-bank-card"></i>
                提成金额
              </template>

              <el-input-number v-model="form.money" :precision="2" placeholder="请输入提成金额" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-bank-card"></i>
                备注
              </template>
              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>



    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    getAction,
    addAction,
    getById,
    updateAction,
    accMul,
    accDiv,
    accSub
  } from '@/api/manage';
  import moment from 'moment';

  export default {
    name: "OrderCommissionRecordForm",
    dicts: ['order_area'],
    data() {
      return {
        // 弹出层标题
        title: '',
        // 遮罩层
        loading: true,
        activeName: "first",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        order: {},
        rule: {},
        // 表单校验
        rules: {},
        url: {
          getById: '/orderCommissionRecord/orderCommissionRecord/',
          add: '/orderCommissionRecord/orderCommissionRecord/add',
          edit: '/orderCommissionRecord/orderCommissionRecord/edit',
          getRule: '/orderCommissionRule/orderCommissionRule/getByAreaAndReturnDays',
        },
        CS: {
          'text-align': 'center', //文本居中
          'min-width': '250px', //最小宽度
          'word-break': 'break-all' //过长时自动换行
        },
        LS: {
          'color': '#000',
          'text-align': 'center',
          'font-weight': '600',
          'height': '40px',
          'min-width': '110px',
          'word-break': 'keep-all'
        }
      };
    },
    created() {

    },
    methods: {
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          orderId: null,
          salesmanId: null,
          salesmanName: null,
          returnDays: null,
          orderMoney: null,
          ruleId: null,
          percent: null,
          money: null,
          remark: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          delFlag: null
        };
        this.resetForm("form");
      },
      /** 新增按钮操作 */
      handleAdd(row) {
        this.reset();
        this.open = true;
        this.order = row;
        this.title = "添加订单提成记录";
        this.getRule();
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids;
        getById(this.url.getById, id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改订单提成记录";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.form.ruleId = this.rule.id;
        this.form.orderId = this.order.id;
        addAction(this.url.add, this.form).then(response => {
          this.$modal.msgSuccess("计算成功");
          this.open = false;
          this.$emit('ok');
        });
      },

      getRule() {
        let that = this;
        let param = {
          area: this.order.area,
          returnDays: this.order.returnDays
        }
        getAction(this.url.getRule, param).then(response => {
          that.rule = response.data;
          that.calculateCommission();
        });
      },
      /*计算提成*/
      calculateCommission() {
        let percent = this.rule.percent;
        let money = this.order.contractMoney;
        let returnDays = this.order.returnDays;
        if (percent < 0) {
          let month = Math.floor(accSub(returnDays, 90) / 30);
          this.form.money = accDiv(accMul(accMul(percent, money), month), 100);
        }
        this.form.money = accDiv(accMul(percent, money), 100);
      }


    }
  };
</script>
